<template>
  <div class="group flex-center-start">
    <template v-if="isEdit">
      <div
        class="tag edit flex-center"
        :class="[item.isGray ? 'gray' : '']"
        v-for="(item, index) in tagsEdit"
        :key="index"
        :style="{ background: colors[index] }"
        @click="toggleTag(item)"
      >
        <div class="icon-plus" v-if="showTagsArr.indexOf(item.id) == -1"></div>
        <div class="icon-right" v-else></div>
        <span>{{ item.categoryName }}</span>
      </div>
    </template>
    <template v-else>
      <template v-for="(item, index) in tags">
        <div
          class="tag"
          :key="index"
          :style="{
            background: showTagsArr.indexOf(item.id) != -1 ? colors[index] : '',
          }"
          v-if="showTagsArr.indexOf(item.id) != -1"
          @dblclick="$emit('editSingleTag', JSON.parse(JSON.stringify(item)))"
        >
          <span :title="item.categoryName">{{ item.categoryName }}</span>
          <div
            class="el-icon-circle-close close"
            v-if="close"
            @click.stop="tagClose(item.id)"
          ></div>
          <div
            class="el-icon-circle-close close"
            v-if="tagsClose"
            @click.stop="closeItem(item.id)"
          ></div>
        </div>
      </template>
      <div v-if="showAddBtn" class="addTag flex-center" @click="openDialog">
        <em class="el-icon-plus" />
      </div>
    </template>
  </div>
</template>

<script>
/*** random number : 生成指定范围内的随机整数 ****/
function rn(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
/*** random color : 生成指定范围内的随机颜色 ****/
function rc(min, max) {
  var r = rn(min, max);
  var g = rn(min, max);
  var b = rn(min, max);
  return "rgb(" + r + "," + g + "," + b + ")";
}
import { mapState } from "vuex";
export default {
  props: {
    // isAllShow: {
    //   default: () => false,   // 是否全部显示
    // },
    isEdit: {
      default: () => false, //是否编辑
    },
    showTagsArr: {
      default: () => [], //显示的标签ID
    },
    close: {
      default: () => false, //是否编辑
    },
    tagsClose: {
      default: () => false, //是否编辑
    },
    tagsEdit: {
      default: () => [],
    },
    groupId: {
      default: () => {
        return "";
      },
    },
    showAddBtn: {
      default: () => {
        return false;
      },
    },
  },
  computed: {
    ...mapState({
      tags(state) {
        return state.app.allTags;
      },
    }),
    colors() {
      let arr = [];
      for (let i = 0; i < this.tags.length; i++) {
        arr.push(rc(100, 220));
      }
      return arr;
    },
  },
  watch: {
    /* showTagsArr(n) {
      // 增加isGray 背景是否为灰色（未选中状态） 字段  判断是否显示灰色背景
      this.tagsEditCopy = this.tagsEdit.map((item) => {
        this.showTagsArr.forEach((key) => {
          if (key == item.id) {
            item.isGray = false;
          } else {
            item.isGray = true;
          }
        });
        return item;
      });
      console.log(999, this.tagsEditCopy);
    }, */
  },
  data() {
    return {
      tagsEditCopy: [],
    };
  },
  created() {},
  methods: {
    // 增加isGray 背景是否为灰色（未选中状态） 字段  判断是否显示灰色背景
    toggleTag(item) {
      let showTagsArr = JSON.parse(JSON.stringify(this.showTagsArr));
      //  标签选择改为单选
      let isNoneOne = false; // 判断该标签组下是否有至少一个显示
      this.tagsEdit.forEach((key) => {
        key.isGray = true;
        let index = this.showTagsArr.indexOf(key.id);
        if (index > -1) {
          isNoneOne = true;
          // 改为 不至少一个必选
          if (key.id == item.id && key.id == showTagsArr[index]) {
            showTagsArr.splice(index, 1);
          } else {
            showTagsArr.splice(index, 1, item.id);
          }
        }
      });
      if (!isNoneOne) {
        this.tagsEdit.forEach((key) => {
          key.isGray = true;
          if (key.id == item.id) {
            key.isGray = false;
            showTagsArr.push(item.id);
          }
        });
      }

      /* if (item.isGray) {
        this.tagsEdit.forEach((key) => {
          if (key.id == item.id) {
            key.isGray = false;
          }
        });
        this.showTagsArr.push(item.id);
        this.$emit("changeTagsArr", this.showTagsArr);
      } else {
        this.tagsEdit.forEach((key) => {
          if (key.id == item.id) {
            key.isGray = true;
          }
        });
        let index = this.showTagsArr.indexOf(item.id);
        if (index > -1) {
          this.showTagsArr.splice(index, 1);
        }
        this.$emit("changeTagsArr", this.showTagsArr);
      }
      this.$forceUpdate(); */
      this.$emit("changeTagsArr", showTagsArr);
    },
    editTag() {
      this.$api.findAllTag().then((res) => {
        this.$store.commit("app/setAllTags", res);
      });
    },
    tagClose(id) {
      this.$confirm('此操作将永久删除该标签，是否继续？', '提示', {
        type: 'warning'
      }).then (() => {
        this.$api.delTag({ id: id }).then((res) => {
          console.log(res);
          this.$api.findAllTag().then((res) => {
            this.$store.commit("app/setAllTags", res);
          });
        });
      })
    },
    closeItem(id) {
      console.log(id);
      this.$emit("tagsDel", id);
    },

    openDialog() {
      this.$emit("openDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  flex-wrap: wrap;
  .tag {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    height: 0.3rem;
    line-height: 0.3rem;
    margin: 0.04rem 0.05rem;
    border-radius: 0.02rem;
    padding: 0rem 0.1rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    & > span {
      display: inline-block;
      max-width: 2rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    
    & > div {
      display: inline-block;
    }
    &.gray {
      background: transparent !important;
    }
    &.edit {
      border: 1px solid #cccccc;
      .icon-plus {
        margin-right: 0.06rem;
        width: 0.12rem;
        height: 0.12rem;
        background-image: url(~@/assets/images/add@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .icon-right {
        margin-right: 0.06rem;
        width: 0.14rem;
        height: 0.08rem;
        background-image: url(~@/assets/images/check_mark@2x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
    }
  }
  .addTag {
    display: inline-block;
    height: 0.3rem;
    line-height: 0.3rem;
    margin: 0.04rem 0.06rem;
    border-radius: 0.02rem;
    padding: 0rem 0.1rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #ffffff;
    // background: #1890ff;
    cursor: pointer;
  }
}
.close {
  width: 20px;
  margin-left: 0.1rem;
  cursor: pointer;
  height: 0.3rem;
  line-height: 0.3rem;
}
.add {
  margin: 0.04rem 0.06rem;
  border-radius: 2px;
  line-height: 1;
  padding: 0.04rem 0.1rem;
  font-size: 0.14rem;
  font-weight: 400;
  color: #1890ff;
  border: 1px solid #1890ff;
}
</style>
